<template>
  <view class="page-container">
    <!-- 固定在顶部的导航栏 -->
    <view class="navbar-fixed">
      <u-navbar title="消息预览" :autoBack="true" />
    </view>

    <!-- 内容区域（需要预留导航栏高度） -->
    <view class="content-container">
      <view class="news-header">
        <text class="title">{{ newsData.title }}</text>
        <text class="title" v-if="newsData.from_username">
          {{ newsData.from_username }}</text
        >

        <view class="meta-info">
          <text class="time">{{ newsData.create_at_show }}</text>
          <text class="type" v-if="newsData.notice_type_name">{{
            newsData.notice_type_name
          }}</text>
          <text class="status" :class="{ unread: newsData.read_is === 0 }">
            {{ newsData.read_is === 0 ? "未读" : "已读" }}
          </text>
        </view>
      </view>

      <scroll-view class="news-content" scroll-y>
        <text>{{ newsData.content }}</text>
      </scroll-view>

      <!-- 			<view class="news-footer">
				<u-button type="primary" @click="markAsRead" v-if="newsData.read_is === 0" class="read-btn"
					text="标记为已读" />
				<text class="creator">创建人ID: {{ newsData.creator_id }}</text>
			</view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

import { onLoad } from "@dcloudio/uni-app";

// 新闻数据
const newsData = ref({
  title: "新客户跟进",
  content:
    '新客户"大地集团"已分配给您，请及时跟进新客户"大地集团"已分配给您，请及时跟进新客户"大地集团"已分配给您，请及时跟进新客户"大地集团"已分配给您，请及时跟进新客户"大地集团"已分配给您，请及时跟进新客户"大地集团"已分配给您，请及时跟进新客户"大地集团"已分配给您，请及时跟进新客户"大地集团"已分配给您，请及时跟进',
  create_at_show: "2025-07-30 15:45:00",
  created_at: "2025-07-30 15:45:00",
  creator_id: 0,
  deleted_at: 0,
  id: 32,
  notice_type: 3,
  notice_type_name: "",
  read_is: 0,
  read_time: 0,
  read_time_show: "",
  updated_at: "2025-07-30 15:45:00",
  wechat_user_id: "7",
});

// 标记为已读
const markAsRead = (type) => {
  uni.showLoading({
    title: "处理中...",
  });

  // 模拟API请求
  // setTimeout(() => {
  // 	newsData.value.read_is = 1;
  // 	newsData.value.read_time = Date.now();
  // 	newsData.value.read_time_show = new Date().toLocaleString();

  // 	uni.hideLoading();
  // 	uni.showToast({
  // 		title: '已标记为已读',
  // 		icon: 'success'
  // 	});
  // }, 800);
  if (Number(type) == 0) {
    proxy
      .$http({
        url: "Notice/Read?id=" + id.value,
      })
      .then((r) => {
        newsData.value = r.data.data;
      });
  } else {
    proxy
      .$http({
        url: "SiXin/Read?id=" + id.value,
      })
      .then((r) => {
        newsData.value = r.data.data;
      });
  }
};

const id = ref(0);
const index = ref();
onLoad((options) => {
  // 这里可以接收页面参数，从API获取数据
  console.log("URL 参数:", options.type); // 输出 123
  id.value = options.id;
  // index.value = options.type;
  markAsRead(options.type);
});
</script>

<style lang="scss">
.page-container {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 固定在顶部的导航栏 */
.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* 内容容器（预留导航栏高度） */
.content-container {
  flex: 1;
  padding: 20rpx;
  padding-top: calc(44px + 90rpx);
  /* 导航栏高度 + 内边距 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news-header {
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;

  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }

  .meta-info {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999;

    .time {
      margin-right: 20rpx;
    }

    .type {
      margin-right: 20rpx;
      padding: 0 10rpx;
      background-color: #e6f7ff;
      color: #1890ff;
      border-radius: 4rpx;
    }

    .status {
      &.unread {
        color: #ff4d4f;
      }
    }
  }
}

.news-content {
  flex: 1;
  padding: 3rpx;
  font-size: 30rpx;
  line-height: 2;
  color: #333;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .read-btn {
    width: 240rpx;
  }

  .creator {
    font-size: 24rpx;
    color: #999;
  }
}
</style>
